<script lang="ts" setup>
import { ref } from 'vue'
import DrawerPage from './components/DrawerPage.vue';
import SearchSelect from './components/SearchSelect.vue';
import { formatTime } from '@/utils/formdate';
import { artAddChannelService } from '@/api/article.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const cat = () => {
  console.log(value.value)
}
const open = ref()

const tableData = [
  {
    id: 1,
    date: '2016-05-03 12:23:00',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    cover_img:"http://127.0.0.1:8000/static/xx.jpeg",
    content:'<p style="color: red">1233</p>'
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    cover_img:"http://127.0.0.1:8000/static/xx.jpeg",
    content:'<p style="color: red">1233</p>'
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    cover_img:"http://127.0.0.1:8000/static/xx.jpeg",
    content:'<p style="color: red">1233</p>'
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    cover_img:"http://127.0.0.1:8000/static/xx.jpeg",
    content:'<p style="color: red">1233</p>'
  },
]
// 新增
const pubulic = () => {
  open.value.open()
}
// 修改
const Edit = (row) => {
  console.log(row)
  // 调用子组件的方法open
  open.value.open(row)
}

const EmitData = (data) => {
  // .get 是FromDate 的获取方式
  console.log("cover_img:",data.get("cover_img"))
  // 子组件传来的数据，父组件负责新增、修改
  artAddChannelService(data)
}
const value = ref({
  page: 1,
  size: 2,
  selectId : ""
})
</script>
<template>
  <title-page title="文章管理">
    <template #extra>
      <div>
        <el-button @click="pubulic">发布文章</el-button>
      </div>
    </template>
    
      <el-form inline >
        <el-form-item label="文章标题" >
          <search-select v-model="value.selectId"></search-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select label="发布状态" >
            <el-option label="已发布" value=1>新闻</el-option>
            <el-option label="未发布" value=0>新闻</el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item>
          <el-button  style="margin-left: 25px"type="primary">搜索</el-button>
          <el-button plan>重置</el-button>
          <el-button plan @click="cat">cat</el-button>
        </el-form-item>
      </el-form>
      

    

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="index" width="180" />
      <el-table-column prop="date" label="Date" width="180" >
        <template #default="{ row }">
          {{ formatTime(row.date) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="name" label="Name" width="180" >
        <template #default="{ row }">
          <el-link @click="router.push(`/article/detail/?aid=${row.id}`)" type="primary" :underline="false">{{ row.name }}</el-link>
          <!-- <el-link @click="router.push(`/article/detail/${row.id}`)" type="primary" :underline="false">{{ row.name }}</el-link> -->
        </template>
      </el-table-column>
      <el-table-column prop="address" label="Address" />
      
      <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" circle icon="Edit" @click="Edit(scope.row)"></el-button>
        <el-button
          size="small"
          type="danger"
          circle
          icon="Delete"
          
        >
          
        </el-button>
      </template>
    </el-table-column>
    
    <template #empty>
      <el-empty description="暂无数据"></el-empty>
    </template>
    
    </el-table>

    <el-pagination
     v-if="tableData.length>0"
      v-model:current-page=value.page
      v-model:page-size=value.size
      :page-sizes="[5, 10, 20, 100]"
     
  
      :background="true"
      layout="jumper,total, sizes, prev, pager, next "
      :total="10"
      style="justify-content: flex-end;"
      next-text="下一页"
      prev-text="上一页"

    />
  </title-page>
  
  <!-- 抽屉  -->
  <drawer-page ref="open" @tijiao = EmitData></drawer-page>
</template>
<style scoped>
.sear{
margin-bottom: 10px;
}
</style>